import React, { Component } from 'react'
import './App.css'
import {Link, NavLink, withRouter} from 'react-router-dom'
// import Life from './components/Life'
// import From from './components/From';
// import Ref from './components/Ref';
// import Father from './components/Father';
// import Error from './components/Error';
// import Boundary from './components/Boundary';
// import Hoc from './components/HOC';
// import Comment from './components/Comment'
// import Transition1 from './components/Transition1';
// import Transition2 from './components/Transition2';
// import Transition3 from './components/Transition3';
// 导入路由组件
import Router from './route/Index.jsx'

class App1 extends Component {
  constructor() {
    super();
    this.state = {
      num: 18
    }
  }
  changeNum() {
    this.setState({
      num: 17
    })
  }
  render() {
    return (
      <div>
        {/* 类似vue中的router-view组件，路由出口，展示路由的计算结果 */}
        <Router></Router>
        {/* {this.state.num === 18 ? <Life info={this.state.num}></Life>: null} */}
        {/* <button onClick={()=>this.changeNum()}>app:修改数据</button>
        <hr></hr> */}
        {/* <From></From> */}
        {/* <Father></Father>
        <Hoc></Hoc> */}
        {/* <Boundary>
          <Error></Error>
        </Boundary> */}
        {/* <Ref></Ref> */}
        {/* <Comment></Comment> */}
        {/* <Transition1></Transition1> */}
        {/* <Transition2></Transition2> */}
        {/* <Transition3></Transition3> */}
      </div>
    )
  }
}
let App = withRouter(App1);
export default App
